<template>
  <div class="manageDetail flex flex-col">
    <a-card>
      <a-descriptions :column="{ xs: 1, md: 3, lg: 3 }">
        <template #title>
          <div class="flex flex-a-c">
            <div class="flex-col">
              <a-avatar :size="60" class="mr-14" shape="circle" :imageUrl="userInfo.avatar" v-if="userInfo.avatar">
              </a-avatar>
              <span class="text-size-20 mt-20">{{ userInfo.nickname }}</span>
            </div>
            <a-space class="ml-40">
              <a-statistic
                title="账户余额"
                :value="Number(userInfo?.userAccountBalance ?? 0)"
                :precision="2"
                show-group-separator
              />
              <a-statistic
                class="ml-20"
                title="累计结算"
                :value="Number(userInfo?.userSettlementsSumAmount ?? 0)"
                show-group-separator
                :precision="2"
              />
            </a-space>
          </div>
        </template>
        <a-descriptions-item label="邀请码">
          <a-tag
            >{{ userInfo.inviteCode }}
            <span class="ml-6" v-if="userInfo.studentIdTwo && userInfo.studentIdTwo != 0"
              >({{ userInfo.studentIdTwo }})</span
            ></a-tag
          >
        </a-descriptions-item>
        <a-descriptions-item label="当前等级">
          <a-tag>{{ userInfo.userRankName || '用户' }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="会员注册时间">
          <a-tag>{{ userInfo.registerAt || '--' }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="解锁VIP时间">
          <a-tag>{{ userInfo.upgradeAt || '--' }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="渠道方">
          <a-tag>{{ userInfo.invitePid || '--' }}</a-tag>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card :bordered="false" class="gi_card mt-20 flex-1" v-if="userId || route.query.id">
      <div class="tab-box">
        <a-tabs position="top" v-model:active-key="selectedKey">
          <a-tab-pane key="jcxx" title="基础信息">
            <Base :userInfo="userInfo" @getUserDetail="getUserDetail" />
          </a-tab-pane>
          <a-tab-pane key="yqmx" title="邀请明细">
            <Invite :userId="userId" />
          </a-tab-pane>
          <a-tab-pane key="ddmx" title="订单明细">
            <Order />
          </a-tab-pane>
          <a-tab-pane key="yjmx" title="佣金明细">
            <Commission :userId="userId" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { userAgentDetail, getUserIdByInviteCode, checkZeroBuyCount } from '@/apis'
import Base from './Base.vue'
import Invite from './Invite.vue'
import Order from './Order.vue'
import Commission from './Commission.vue'
import { useTabsStore } from '@/store'

defineOptions({ name: 'userDetail' })

const route = useRoute()
const selectedKey = ref('jcxx')
const userInfo = reactive({})
const userId = ref()
const getUserDetail = async () => {
  if (!route.query.id && route.query.inviteCode) {
    const result = await getUserIdByInviteCode({
      inviteCode: route.query.inviteCode
    })
    route.query.id = result.data.userId
    userId.value = result.data.userId
  }
  const res = await userAgentDetail({
    id: route.query.id
  })
  const res2 = await checkZeroBuyCount({ userId: route.query.id })
  Object.assign(userInfo, res.data)
  userInfo.haveCanUseNum = res2.data.haveCanUseNum
  useTabsStore().changeTagTitle('用户-' + userInfo.nickname)
}
getUserDetail()

if (route.query.select) selectedKey.value = route.query.select
</script>

<style lang="less" scoped>
.manageDetail {
  height: 100%;
  overflow: hidden;
  margin: var(--margin);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

:deep(.arco-tabs-content) {
  box-sizing: border-box;
  width: 100%;
  padding-top: 16px;
  overflow: auto;
  flex: 1;
  height: 100%;
}
:deep(.arco-tabs) {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
:deep(.tab-box) {
  height: 100%;
}
:deep(.gi_card .arco-card-body) {
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
